<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input id="file" type="file" />
    </div>
    <script>
      const compress = (res) => {
        var img = new Image();
        const maxH = 160;
        img.onload = () => {
          const cvs = document.createElement("canvas");
          const ctx = cvs.getContext("2d");
          if (img.height > maxH) {
            img.width *= maxH / img.height;
            img.height = maxH;
          }
          cvs.width=img.width
          cvs.height=img.height
          ctx.clearRect(0,0,cvs.width,cvs.height)
          ctx.drawImage(img,0,0,img.width,img.height)
          var dataUrl=cvs.toDataURL('image/jpeg',0,0.6)
        };
        img.src=res
      };
      document.getElementById("file").addEventListener(
        "change",
       function () {
          var reader = new FileReader();
          reader.onload = (e) => {
            compress(this.result);
          };
          console.log(this.files)
          reader.readAsDataURL(this.files[0]);
        },
        false
      );
    </script>
  </body>
</html>
